<!--
 * @Date: 2020-12-02 14:20:47
 * @LastEditors: Hou
 * @LastEditTime: 2020-12-16 09:58:07
-->
<template>
  <div
    class="bgGray"
    style="oveflow-y: scroll; position: relative; min-height: 105%"
  >
    <div class="tab flexStart bgWhite orderTab">
      <div
        @click="handleTab(0)"
        :class="activeType == 0 ? 'tabiItem tabiItemActive' : 'tabiItem'"
      >
        全部订单
      </div>
      <div
        @click="handleTab(1)"
        :class="activeType == 1 ? 'tabiItem tabiItemActive' : 'tabiItem'"
      >
        待付款
      </div>
      <div
        @click="handleTab(5)"
        :class="activeType == 5 ? 'tabiItem tabiItemActive' : 'tabiItem'"
      >
        待收货
      </div>
      <div
        @click="handleTab(2)"
        :class="activeType == 2 ? 'tabiItem tabiItemActive' : 'tabiItem'"
      >
        已完成
      </div>
      <!-- @click="handleTab(4)" -->
      <div
        @click="handleTab(4)"
        :class="activeType == 4 ? 'tabiItem tabiItemActive' : 'tabiItem'"
      >
        退款/售后
      </div>
      <!---->
    </div>

    <!-- 这里购买的商品列表。 -->
    <!-- activeType !== 4 &&  -->
    <div
      class="content"
      v-show="(activeType !== 4 && itemData.length > 0) || returnGoods == false"
    >
      <div class="order" v-for="(item, index) in itemData" :key="index">
        <div class="orderContent">
          <div class="orderNo">订单编号：{{ item.orderNo }}</div>
          <div class="bgWhite flexStart orderCenter">
            <div class="leftImg" @click="goOrderDetail(item)">
              <img :src="item.productThumbnail" alt="" />
            </div>
            <div class="rightText" @click="goOrderDetail(item)">
              <div class="flexBetween">
                <span class="productName textOverflow">{{
                  item.productName
                }}</span>
                <span class="productName textOverflow"></span>
              </div>
              <div class="flexStart productNum">
                <span class="textOverflow">数量：</span>
                <span>{{ item.quantity }}</span>
              </div>
              <div class="flexStart" style="float: right">
                <span class="textOverflow">订单金额：</span>
                <span style="color: #df4747">{{ item.payPrice }}</span>
              </div>
              <div class="arrowIcon"></div>
            </div>
          </div>
          <p class="bottom">
            <!-- orderStatus ====>>>>> 1支付中 2支付超时 3交易成功 4待发货 5已发货 6确认收货 7退款中 8退货成功 9退货失败失败,10取消支付  -->
            <span class="left">
              <span class="money"> {{ item.orderStatus | formStatus }}</span>
              <!--支付超时 2 / 交易成功 3 / -->
              <span
                class="time"
                v-if="
                  item.orderStatus == 1 &&
                  (item.orderType == 1 ||
                    item.orderType == 5 ||
                    item.orderType == 6 ||
                    item.orderType == 7)
                "
              >
                <van-count-down
                  style="color: #d0203b"
                  :time="item.time"
                  format="mm分ss秒"
                />
              </span>
            </span>
            <span>
              <span
                class="goPay"
                v-if="item.orderStatus == 1"
                @touchstart="quXiaoPay(item)"
                >取消订单</span
              >
              <!--待付款1 -->
              <span
                class="goPay"
                v-if="item.orderStatus == 1"
                @touchstart="continueToPay(item)"
                >付款</span
              >
              <span
                class="goPay"
                v-if="
                  item.orderStatus == 3 &&
                  (item.orderType == 1 ||
                    item.orderType == 5 ||
                    item.orderType == 6 ||
                    item.orderType == 7)
                "
                @touchstart="refund(item)"
                >退款</span
              >
              <!-- /**
               * @name: Hou
               * @msg: orderType 1 5 6 7可以退款
               * @Date: 2020-12-15 14:10:07
               */ -->
              <span
                class="goPay"
                v-if="
                  item.orderStatus == 3 ||
                  item.orderStatus == 8 ||
                  item.orderStatus == 2
                "
                @touchstart="removeGoods(item.orderNo)"
                >删除订单</span
              ><!--待收货5-->
              <span
                class="goPay"
                v-if="item.orderStatus == 5 || item.orderStatus == 8"
                @touchstart="confirmGoods(item)"
                >确认收货</span
              >
              <!--  重新购买===>>>确认订单页  item.orderStatus == 6 √ -->
              <!-- /**
               * @name: Hou
               * @msg:  item.orderStatus == 6 确认收货 ???
               * @Date: 2020-12-15 19:22:06
               */ -->
              <span
                class="goPay"
                v-if="
                  item.orderStatus == 2 ||
                  item.orderStatus == 3 ||
                  item.orderStatus == 10
                "
                @touchstart="goConfirm(item)"
                >重新购买</span
              >
            </span>
          </p>
        </div>
      </div>
    </div>
    <!-- 这里购买的商品列表。 -->

    <!-- 退货地址  -->
    <div class="content" v-show="activeType == 4">
      <div v-show="returnGoods == true">
        <div class="content1">
          <div class="problem1" v-show="addressShow == true">
            <div class="title">退货地址：</div>
            {{ RefundAddress }}
          </div>
          <div class="problem">
            <div class="title">问题描述：</div>
            <van-field
              v-model="message"
              rows="2"
              autosize
              type="textarea"
              maxlength="300"
              placeholder="请描述你遇到的问题或者任何意见或者建议…"
              show-word-limit
            />
          </div>
          <div class="courierNum flexBetween" v-show="addressShow == true">
            <div class="title">快递物流单号:</div>
            <div class="courierNum_body">
              <input type="text" v-model="LogisticsOrderNo" />
            </div>
          </div>
          <div class="up">
            <van-uploader
              v-model="fileList"
              :before-read="beforeRead"
              :after-read="afterRead"
              @delete="handleDelete"
              :max-count="3"
            >
              <template #preview-cover="{ file }">
                <div class="preview-cover van-ellipsis"></div>
              </template>
            </van-uploader>
          </div>
          <div class="tips">只能上传PNG/JPG文件(3张以内)</div>
        </div>
        <div class="tel">
          客服电话：<span
            ><a
              href="tel:4008200668"
              style="text-decoration: none; color: gray; font-weight: 600"
              >400 820 0668</a
            ></span
          >
        </div>
        <div class="footer">
          <div class="footer-c">
            <div class="cancel" @click="handleCancel">取消</div>
            <div class="submit" @click="handleSubmit">提交</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 退货地址  -->

    <div v-show="itemData.length <= 0 && !returnGoods" class="noValue">
      <div><img :src="jiluImg" alt="" /></div>
      <p>您目前还没有记录</p>
    </div>

    <div id="yinHangZhifuZhi" class="yinHangZhifu"></div>

    <confirm
      ref="myConfirm"
      :content="content"
      :titleText="titleText"
      :isShowConfirm="isShowConfirm"
      @userBehavior="userBehaviorFun"
    ></confirm>
    <BackToTop />
  </div>
</template>

<script>
import Confirm from "@/components/Confirm";
import { Col, Toast } from 'vant';

export default {
  components: { Confirm },
  data() {
    return {
      activeType: 0,
      jiluImg: 'https://cdn.92jiangbei.com/third/bc-trip-travel/bigRun/bgc/nocoupon.png',
      isShowConfirm: false,
      titleText: "温馨提示",
      content: "请确定是否退款？",
      itemData: [],
      timer: "",
      payFlag: false,
      orderStatus: '',
      returnGoods: false, //退货列表默认不显示
      number: '1', //数量
      activeIcon: 'https://cdn.92jiangbei.com/third/bc-trip-travel/bigRun/ico/circle.png',
      inactiveIcon: 'https://cdn.92jiangbei.com/third/bc-trip-travel/bigRun/ico/circle1.png',
      // 问题描述
      message: '',
      RefundAddress: '',//退货地址
      // 物流单号
      LogisticsOrderNo: '',
      // 上传照片
      fileList: [],
      imageUrlList: [],
      orderNo: '',//订单编号
      quantity: '',//数量
      orderType: '',//卡券 实物
      refundFlag: true,
      addressShow: true

    };
  },
  filters: {
    // 订单状态 1支付中 2支付超时 3交易成功 4待发货 5已发货 6确认收货 7退款中 8退货成功 9退货失败失败,10取消支付
    formStatus(status) {
      // console.log('status===支付状态====>>>>>>>>>',status)
      const statusMap = {
        1: "待付款",
        2: "支付超时",
        3: "交易成功",
        4: "待发货",
        5: "已发货",
        6: "已收货",
        7: "退款中",
        8: "退款成功",
        9: "失败",
        10: "已取消",
      };
      return statusMap[status];
    },
    // PAYING(1),//支付中
    // PAY_OVERTIME(2),//支付超时
    // PAY_SUCCESS(3),//支付成功
    // FORWARDING(4),//待发货
    // SHIPPED(5),//已发货
    // CONFIRM_RECEIPT(6),//确认收货
    // RETURNING(7),//退货中
    // RETURN_SUCCESS(8),//退货成功
    // RETUR_FAIL(9),//失败
    // CANCEL_PAY(10);//取消支付
  },
  created() {
    this.activeType = this.$route.query.val || 0;
    this.getList();
  },
  mounted() {
  },
  destroyed() {
    this.timer = ''
  },
  methods: {
    getList() { // 获取全部订单
      const params = {}
      this.$HttpPost(this.$api.orderList, params).then((res) => {
        if (res.code === "000") {
          this.itemData = res.content;
          console.log('获取全部订单===>>>>', res)
          this.timers();

        }
      });
    },
    paying() { // 待付款
      const params = {}
      this.$HttpPost(this.$api.paying, params).then((res) => {
        if (res.code === "000") {
          // console.log(res)
          this.itemData = res.content;
          console.log('待付款===>>>>', res)
          this.timers();
        }
      })
    },
    received() { // 待收货
      const params = {}
      this.$HttpPost(this.$api.received, params).then((res) => {
        if (res.code === "000") {
          // console.log(res)
          this.itemData = res.content;
          console.log('待收货===>>>>', res)

        }
      })
    },
    payend() { // 已完成
      const params = {}
      this.$HttpPost(this.$api.payend, params).then((res) => {
        if (res.code === "000") {
          this.itemData = res.content;
          console.log('已完成===>>>>', res)
        }
      })
    },
    payrefund() { // 退款售后
      const params = {}
      this.$HttpPost(this.$api.payrefund, params).then((res) => {
        if (res.code === "000") {
          this.itemData = res.content;
          console.log('退款售后===>>>>', res)
        }
      })
    },

    handleTab(val) { // 切换tab
      // console.log('val====>>>>切换tab', val)
      this.activeType = val;
      if (val === 0) { //全部订单
        this.getList()
      }
      if (val === 1) { //待付款
        this.paying()
      }
      if (val === 5) { //待收货
        this.received()
      }
      if (val === 2) {  //已完成
        this.payend()
      }
      if (val === 4) {  // 退款/售后
        this.returnGoods = false
        this.payrefund()  //退款单列表
      }
    },
    goBack() {
      if (sessionStorage.getItem("index")) {
        this.$router.go(-1);
        return;
      }
      // this.$router.replace("/")
      location.href = "javascript:history.go(-2);";
    },

    confirmGoods(item) { // 确认收货
      console.log('item :>> ', item);
      this.$dialog.confirm({
        title: '',
        message: '确定收货？'
      }).then(() => {
        const params = { orderNo: item.orderNo }
        console.log('params :>> ', params);
        this.$HttpPost(this.$api.confirm, params).then(res => {
          if (res.code === '000') {
            if (this.activeType == 0) {
              this.getList()
            } else {
              this.received()
              /**
               * @name: Hou
               * @msg: 订单状态为 5 接口处不为 1 报：desc
               * @Date: 2020-12-14 19:10:41
               */
            }
            Toast(`${res.desc}`)
          } else {
            Toast(`${res.desc}`)
          }
        })
      }).catch(() => {
        // on cancel
      })


    },
    goConfirm(item) { //重新购买
      console.log('重新购买===>>>>>>item.orderType', item.orderType)
      window.sessionStorage.setItem('goodsDetails', JSON.stringify(item))

      //  备注：orderType  订单类型  { 2酒店甄选 3免费领取 4直冲 }  { 1酒店套餐 5卡券 6实物 7酒店子商品 }

      if (item.orderType == 2) {   //2酒店甄选 
        console.log('orderType', item)
        this.$router.push({
          path: '/actInterest',
          query: {
            activityProductNo: item.activityProductNo,
            equityNo: item.equityNo,
            productName: item.productName,
          }
        })
      } else if (item.orderType == 3) {   // 3免费领取
        console.log('orderType', item)
        this.$router.push({
          path: '/free',
          query: {
            activityProductNo: item.activityProductNo
          }
        })
      } else {
        this.$router.push({
          path: '/goods/confirm',
          query: {
            activityProductNo: item.activityProductNo
          }
        })
      }


      // { // 1酒店套餐 5卡券 6实物 7酒店子商品 
      //   console.log('orderType', item)
      //   this.$router.push({
      //     path: '/goods/confirm',
      //     query: {
      //       activityProductNo: item.activityProductNo
      //     }
      //   })

      // }

    },
    removeGoods(orderNo) { //删除订单
      const params = { orderNo: orderNo }
      this.$HttpPost(this.$api.delete, params).then((res) => {
        if (res.code === "000") {
          console.log('删除订单res', res)
          if (this.activeType == 0) {
            this.getList()
          } else {
            this.payend()
          }
          Toast('已删除')
        }
      })


    },
    refund(item) { //申请退款
      // 申请退款 订单编号 orderNo
      this.orderNo = item.orderNo
      this.quantity = item.quantity
      this.orderType = item.orderType
      console.log('类型：orderType', this.orderType, 'item', item)
      /**
       * @name: Hou
       * @msg: orderType 1 5 6 7可以退款
       * @Date: 2020-12-14 19:35:07
       */

      item.orderType === 5 || item.orderType === 6 ? this.handleTab(4) : '' //订单类型 orderType 5 6 可以退款

      let orderType = item.orderType
      if (orderType == 5 || orderType == 7) {
        console.log('orderType', orderType)

        this.addressShow = false
      }


      const params = { orderNo: item.orderNo };
      console.log('params :>> ', params);
      this.$HttpPost(this.$api.refundAdd, params).then((res) => { // refundAdd  退货地址
        if (res.code === "000") {
          console.log(' 退货地址 ', res.content)
          this.returnGoods = true
          this.activeType = 4
          this.RefundAddress = res.content.refundAddress
        } else {
          console.log(res.desc)
        }
      });
    },
    userBehaviorFun() {
    },
    /** 处理时间戳 */
    detailTime(time) {
      return new Date(time.replace(/-/g, "/"))
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ");
    },
    backUp() {
      this.$router.go(-1);
    },
    timers() {
      this.itemData.map((item, index) => {
        // console.log('orderExpireTime过期时间',item.orderExpireTime)
        var nowTime = new Date();
        var endTime = new Date(item.orderExpireTime.replace(/-/g, "/"));
        item.time = endTime.getTime() - nowTime.getTime();
        // console.log(item.time,'sss')
        // console.log(endTime,'item====>time',item.time)

        if (item.time == 1000) {
          // this.getList()
        }

        return
      });

    },
    // 取消支付
    quXiaoPay(item) {
      this.$dialog
        .confirm({
          title: "",
          message: "确定取消订单吗？",
        })
        .then(() => {
          this.refundFlag = false;
          // on confirm
          const params = { orderNo: item.orderNo };
          console.log(params)
          this.$HttpPost(this.$api.cancel, params).then((res) => {
            if (res.code === "000") {
              if (this.activeType == 0) {
                this.getList();
              } else {
                this.paying();
              }
            }
          });
        })
        .catch(() => {
          this.refundFlag = false;
        });
    },
    // 继续支付  付款
    continueToPay(item) {
      if (this.payFlag) {
        return;
      }
      this.payFlag = true;
      const params = { orderNo: item.orderNo };
      this.$HttpPost(this.$api.continuePay, params).then((res) => {
        console.log(res, "继续支付");
        if (res.code === "000") {
          document.getElementById("yinHangZhifuZhi").innerHTML = res.content;
          document.forms[0].submit();
          document.getElementById("yinHangZhifuZhi").innerHTML = "";
        } else {
          this.$toast(res.desc, "middle");
        }
        this.payFlag = false;
      });
    },
    // 跳转订单详情
    goOrderDetail(item) {
      window.sessionStorage.setItem("orderDetail", JSON.stringify(item));
      console.log(item, item.orderType, item.orderStatus)
      this.$router.push({
        path: "/orderDetail",
        query: {
          activityProductNo: item.activityProductNo,
        },
      })
    },

    handleCancel() {
      this.$router.go(-1)
    },
    handleDelete(file) { //删除图片
      console.log(file, '1')
    },
    beforeRead(file) { //图片上传前
      // const length = file.size / 1024 < 0.5 * 1024
      // if (!length) {
      //   this.$toast('图片大小不能超过 500kb')
      // }
      let isSuffix = false
      if (file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg') {
        isSuffix = true
      } else {
        this.$toast('请上传png/jpg格式图片')
        isSuffix = false
      }
      return isSuffix
    },
    afterRead(file) { //图片上传
      file.status = 'uploading'
      file.message = '上传中...'
      const params = new FormData()
      params.append('img', file.file)  //图片上传 api
      this.$HttpPostImg(this.$api.uploadOss, params).then((res) => {
        if (res.code === '000') {
          console.log('图片上传====>>>>> res', res)
          file.status = 'success'
          file.message = '上传成功'
          file.iconUrl = res.content[0]
          // this.imageUrlList.push(res.data.content[0])  // ???
        } else {
          file.status = 'failed'
          file.message = '上传失败'
        }
      })
    },
    handleSubmit() { // 退款 提交
      console.log('商品 this.itemData', this.itemData)
      if (!this.message || this.message.replace(/\s+/g, '') === '') {
        return Toast('请填写问题描述')
      }

      const params = {
        orderNo: this.orderNo,  //类型：String  必有字段  备注：订单号
        remark: this.message, // 类型：String  必有字段  备注：退款信息
        RefundAddress: this.RefundAddress, //地址
        logisticsOrderNumber: this.LogisticsOrderNo,  //类型：String  可有字段  备注：物流单号
        imageUrlOne: this.fileList.length > 0 ? this.fileList[0].iconUrl : '', // 类型：String  可有字段  备注：图片1
        imageUrlTwo: this.fileList.length > 1 ? this.fileList[1].iconUrl : '', // 类型：String  可有字段  备注：图片2
        imageUrlThree: this.fileList.length > 2 ? this.fileList[2].iconUrl : '' // 类型：String  可有字段  备注：图片2
      }
      console.log(params, '退款===》》》this.orderType', this.orderType)
      this.$HttpPost(this.$api.cardQuan, params).then((res) => {
        if (res.code === "000") {
          console.log('订单类型 orderType 5 6 退款 res', res)
          this.$toast('提交成功', 'middle')
          setTimeout(() => {
            this.$router.go(-1)
          }, 2000)
        } else {
          console.log(res.desc)
        }

      })


    },
  },


};
</script>

<style scoped lang="scss">
.orderTab {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

.leftImg {
  width: 108px;
  height: 118px;
  margin-right: 26px;
}

.leftImg img {
  width: 100%;
}

.rightText {
  width: 530px;
  font-size: 22px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #7f7f7f;
  line-height: 46px;
}

.productName {
  font-size: 28px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #161514;
  line-height: 40px;
  min-width: 150px;
}

/*  这里表示订单列表内容。  */
.content {
  height: calc(100% - 0.88px); /* 308 83*/
  padding-top: 110px;
  padding-bottom: 110px;
}

.order {
  margin-top: 20px;
}

.order .topOrder {
  overflow: hidden;
}

.leftTopOrder {
  margin-left: 20px;
  font-size: 22px;
  color: #7f7f7f;
  text-align: left;
  height: 80px;
  line-height: 80px;
}

.rightTopOrder {
  float: right;
  margin-right: 49px;
  font-size: 28px;
  font-family: PingFangSC-Regular;
  font-weight: 700;
  color: #161514;
}

.orderCenter {
  padding: 30px 30px 18px;
  position: relative;
  border-radius: 24px;
}

/* 这里是订单的详细内容。*/
.orderContent {
  width: 712px;
  background: #fafafa;
  border-radius: 24px;
  box-shadow: 0px 4px 8px 0px rgba(166, 177, 205, 0.5);
  margin: 0 auto;
  position: relative;
}

.orderContent .first {
  width: 650px;
  height: 71px;
  margin-bottom: 2px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 30px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(30, 30, 30, 1);
  line-height: 71px;
  background-color: rgb(72, 187, 37);
}

.orderNo {
  background-color: #fafafa;
  // background-color: #922727;
  font-size: 26px;
  text-align: left;
  padding: 20px 0 12px 40px;
  border-radius: 24px;
}

.orderContent .first .left {
  float: left;
}

.orderContent .first .right {
  float: right;
}

.orderContent .bottom {
  padding: 0 3.867vw;
  display: flex;
  justify-content: space-between;
  height: 95px;
  line-height: 95px;
  font-size: 26px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(223, 71, 71, 1);
  margin: 0;

  .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

/deep/ .van-count-down {
  line-height: 12vw;
}

.orderContent .bottom .money {
  margin-left: -6px;
}

.orderContent .bottom .time {
  margin-left: 10px;
}

.orderContent .bottom .qu {
  // float: right;
  width: 150px;
  height: 54px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  border: 1px solid rgba(235, 235, 235, 1);
  color: rgba(102, 102, 102, 1);
  line-height: 50px;
  text-align: center;
  margin-top: 19px;
  margin-right: 20px;
  cursor: pointer;
}

.orderContent .bottom .goPay {
  float: right;
  width: 132px;
  height: 58px;
  background: linear-gradient(180deg, #d1203c, #b0071e 99%);
  border-radius: 10px;
  color: rgba(255, 255, 255, 1);
  line-height: 58px;
  text-align: center;
  margin-top: 19px;
  // margin-right: 30px;
  margin-left: 30px;
  cursor: pointer;
}

.tab {
  text-align: center;
  font-size: 30px;

  .tabiItem {
    width: 33.3333%;
    padding: 34px 0;
  }

  .tabiItemActive {
    width: 33.3333%;
    background: #d0203b;
    color: #fff;
  }
}

.logisticsCon {
  background: #fff;
  margin-bottom: 40px;
  margin-top: 20px;
}

.arrowIcon {
  width: 19px;
  height: 28px;
  background: url("https://cdn.92jiangbei.com/third/bc-trip-travel/bigRun/ico/icon-fanhui.png")
    no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 35%;
  right: 30px;
}

.productNum {
  padding-top: 10px;
}

.content1 {
  position: relative;
  top: 2.333vw;
  margin-top: 20px;
  width: 96%;
  min-height: 1000px;
  padding-bottom: 30px;
  background-color: #ffffff;
  border-radius: 22px;
  margin: 0 auto;

  .problem2 {
    box-sizing: border-box;
    padding: 0 40px;
    padding-bottom: 30px;
    text-align: left;

    .title {
      margin: 31px 0;
      font-size: 30px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #000000;
      display: inline-block;
    }

    .input {
      width: 56vw;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      border: 1px solid gray;
      text-indent: 8px;
      border-radius: 15px;
    }
  }

  .problem1 {
    box-sizing: border-box;
    padding: 0 40px;
    padding-bottom: 30px;
    text-align: left;

    .title {
      margin: 31px 0;
      font-size: 30px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #000000;
      display: inline-block;
    }
  }

  .problem {
    box-sizing: border-box;
    padding: 5px 40px;
    padding-bottom: 30px;

    .title {
      margin: 31px 0;
      font-size: 30px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #000000;
    }

    /deep/ .van-cell {
      height: 270px;
      // background-color: #F3EBEB;
      border-radius: 15px;

      background: #f3ebeb
        url("https://cdn.92jiangbei.com/third/bc-trip-travel/bigRun/ico/feedback.png")
        no-repeat right 19px bottom 26px;
      background-size: 21.067vw;

      .van-field__body {
        height: 250px;

        .van-field__control {
          height: 250px !important;
          color: #787878 !important;
        }
      }

      .van-field__word-limit {
        margin-top: -14px !important;
      }
    }
  }

  .up {
    width: 100%;
    height: 180px;
    box-sizing: border-box;
    padding: 0 40px;

    .van-uploader {
      width: 100%;
      float: left;
    }
  }

  .tips {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 0 40px;
    text-align: left;
    font-size: 26px;
    color: #494949;
    line-height: 40px;
  }
  .courierNum {
    margin-top: 3.6vw;
    margin-bottom: 57px;
    .title {
      height: 55px;
      line-height: 55px;
    }
    padding: 0 40px;
    .courierNum_body {
      width: 420px;
      border: 1px solid #979797;
      border-radius: 15px;

      font-size: 30px;
      color: #000000;
      input {
        width: 90%;
        border: 0 none;
        line-height: 55px;
        border-radius: 15px;
      }
    }
  }
}

.tel {
  width: 100%;
  height: 5.333vw;
  margin-top: 6.6vw;
  margin-bottom: 8.667vw;
  line-height: 5.333vw;
  font-size: 3.467vw;
  font-weight: 400;
  color: #494949;
  text-align: center;

  a {
    font-size: 28px;
    color: rgba(15, 121, 240, 1);
    text-decoration: underline;
  }
}

.footer {
  height: 43vw;
  background-color: #f4f5f7;
  z-index: 999;

  .footer-c {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 690px;
    height: 90px;
    margin: 0 auto;
    background: #ececec;
    border-radius: 45px;
    overflow: hidden;

    .cancel,
    .submit {
      width: 210px;
      height: 100%;
      text-align: center;
      font-size: 30px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #cacaca;
      line-height: 90px;
    }

    .submit {
      width: 480px;
      font-size: 30px;
      color: #ffffff;
      background: linear-gradient(84deg, #d1203c 4%, #b0071e 69%);
    }
  }
}
</style>
